<template>
    <div class='container'>
        <div class="left">
            <div class="banner">
                <div class="banner-left">
                    <t-swiper :duration="300" :interval="2000" theme="dark" navigationType="dots-bar"
                        :navigation="{ type: 'dots-bar' }" class="swiper">
                        <t-swiper-item>
                            <div class="swiper-item">
                                <t-image src="https://piccdn3.umiwi.com/img/202502/10/202502100354577516290700.jpeg"
                                    alt="" fit="fill" class="image" />
                            </div>
                        </t-swiper-item>
                        <t-swiper-item>
                            <div class="swiper-item">
                                <t-image src="https://piccdn3.umiwi.com/img/202502/10/202502100354577516290700.jpeg"
                                    alt="" fit="fill" class="image" />
                            </div>
                        </t-swiper-item>
                        <t-swiper-item>
                            <div class="swiper-item">
                                <t-image src="https://piccdn3.umiwi.com/img/202502/10/202502100354577516290700.jpeg"
                                    class="image" alt="" fit="fill" />
                            </div>
                        </t-swiper-item>
                    </t-swiper>
                </div>
                <div class="banner-right">
                    <div class="item item1">sad</div>
                    <div class="item item2">sad</div>
                </div>
            </div>
            <div class="tab">
                <t-tabs placement="left" :default-value="1">
                    <t-tab-panel :value="1" label="TXT">
                        <t-list split size="small">
                            <t-list-item @click="handleClick('abc')">
                                <t-list-item-meta title="列表主内容11">
                                    <template #description>
                                        <p>契约锁，是一个电子签章及印章管控平台，提供的电子文件具有与纸质文件一样的法律效力。2025年7月，契约锁发布安全补丁修复了远程代码执行漏洞。该漏洞允许未授权攻击契约锁，是一个电子签章及印章管控平台，提供的电子文件具有与纸质文件一样的法律效力。2025年7月，契约锁发布安全补丁修复了远程代码执行漏洞。该漏洞
                                        </p>

                                        <p><t-tag>标签1</t-tag><t-tag>标签2</t-tag>
                                            <span>
                                                description="小*叔 发表于 山东· 1322浏览 · 2025-07-21 13:57"
                                            </span>
                                        </p>
                                    </template>
                                </t-list-item-meta>

                            </t-list-item>
                            <t-list-item>
                                <t-list-item-meta title="列表主内容12" description="列表内容列表内容" />
                            </t-list-item>
                            <t-list-item>
                                <t-list-item-meta title="列表主内容13" description="列表内容列表内容" />
                            </t-list-item>
                        </t-list>
                    </t-tab-panel>
                    <t-tab-panel :value="2" label="PDF">
                        <t-list split size="small">
                            <t-list-item>

                                <t-list-item-meta title="列表主内容21" description="列表内容列表内容">
                                    <t-tag>标签1</t-tag><t-tag>标签2</t-tag>
                                </t-list-item-meta>
                            </t-list-item>
                            <t-list-item>
                                <t-list-item-meta title="列表主内容22" description="列表内容列表内容">
                                    <t-tag>标签1</t-tag><t-tag>标签2</t-tag>asdasds
                                </t-list-item-meta>
                            </t-list-item>
                            <t-list-item>
                                <t-list-item-meta title="列表主内容23" description="列表内容列表内容">
                                    <t-tag>标签1</t-tag><t-tag>标签2</t-tag>
                                </t-list-item-meta>
                            </t-list-item>
                        </t-list>
                    </t-tab-panel>
                    <t-tab-panel :value="3" label="DOC">
                        <t-list split size="small">
                            <t-list-item>
                                <t-list-item-meta title="列表主内容31" description="列表内容列表内容" />
                            </t-list-item>
                            <t-list-item>
                                <t-list-item-meta title="列表主内容32" description="列表内容列表内容" />
                            </t-list-item>
                            <t-list-item>
                                <t-list-item-meta title="列表主内容33" description="列表内容列表内容" />
                            </t-list-item>
                        </t-list>
                    </t-tab-panel>
                </t-tabs>
            </div>
        </div>
        <div class="right">
            <div class="edit">
                <t-button @click="handleEditClick">编辑文</t-button>
            </div>
            <div class="hot">热门文章
                <t-list split size="small">
                    <t-list-item>
                        <t-list-item-meta title="1. 北京大事件" />
                    </t-list-item>
                    <t-list-item>
                        <t-list-item-meta title="2. 南京大事件" />
                    </t-list-item>
                    <t-list-item>
                        <t-list-item-meta title="3. 上海大事件" />
                    </t-list-item>
                </t-list>
            </div>
            <div class="perfit">
                优秀文章
                <t-list split size="small">
                    <t-list-item>
                        <t-list-item-meta title="1. 北京大事件" />
                    </t-list-item>
                    <t-list-item>
                        <t-list-item-meta title="2. 南京大事件" />
                    </t-list-item>
                    <t-list-item>
                        <t-list-item-meta title="3. 上海大事件" />
                    </t-list-item>
                </t-list>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleClick = (id: any) => {
    console.log(id);
    router.push({ name: 'blogDetail', params: { id: id } })
}

const handleEditClick = () => {
    router.push({ name: 'blogEdit' })
}
</script>
<style lang='scss' scoped>
.container {
    width: 90%;
    display: flex;
    margin: 0 auto;
    gap: 10px;

    .left {
        width: 80%;


        .banner {
            display: flex;
            height: 300px;



            .banner-left {
                width: 60%;

                .swiper-item {
                    height: 300px;

                }

                .image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;

                }
            }

            .banner-right {
                width: 40%;
                margin-left: 10px;

                display: block;

                .item {
                    height: 145px;
                    border-radius: 5px;
                }

                .item1 {

                    background-color: rgb(194, 8, 8);

                }

                .item2 {
                    margin-top: 10px;
                    background-color: rgb(47, 23, 201);
                }
            }
        }

        .tab {
            background-color: aquamarine;
        }
    }

    .right {
        width: 20%;
        display: flex;
        flex-direction: column;
        gap: 10px;

        .edit {
            background-color: aquamarine;
        }

        .hot {
            background-color: aquamarine;
            border: 1px solid rgb(0, 6, 4);
        }

        .perfit {
            background-color: aquamarine;
        }
    }
}
</style>
